<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全国收入支出变化历史</title>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/jquery.min.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/jquery-ui.min.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/ResizeSensor.js"></script>

            <link rel="stylesheet"  href="https://assets.pyecharts.org/assets/jquery-ui.css">

</head>
<body>
    <style>.box {  }; </style>
        <button onclick="downloadCfg()">Save Config</button>
    <div class="box">
                <div id="90b8a018c5734ffe92858f98909ffa27" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_90b8a018c5734ffe92858f98909ffa27 = echarts.init(
            document.getElementById('90b8a018c5734ffe92858f98909ffa27'), 'white', {renderer: 'canvas'});
        var option_90b8a018c5734ffe92858f98909ffa27 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "blue",
        "green",
        "yellow",
        "red",
        "pink",
        "orange",
        "purple"
    ],
    "series": [
        {
            "type": "pie",
            "clockwise": true,
            "data": [
                {
                    "name": "\u5361\u901a\u52a8\u6f2b\u4eba\u7269",
                    "value": 337
                },
                {
                    "name": "\u5c4f\u5e55\u622a\u56fe",
                    "value": 30
                },
                {
                    "name": "\u52a8\u7269\u77e2\u91cf\u56fe",
                    "value": 3
                },
                {
                    "name": "\u52a8\u7269\u6f2b\u753b",
                    "value": 9
                },
                {
                    "name": "\u5723\u8bde\u8001\u516c\u516c",
                    "value": 2
                },
                {
                    "name": "\u5361\u901a\u56fe",
                    "value": 2
                },
                {
                    "name": "\u5de5\u7b14\u753b",
                    "value": 20
                },
                {
                    "name": "\u7ed8\u753b",
                    "value": 4
                },
                {
                    "name": "\u56fe\u753b",
                    "value": 13
                },
                {
                    "name": "\u7f8e\u5973",
                    "value": 5
                },
                {
                    "name": "\u7b80\u7b14\u753b",
                    "value": 61
                },
                {
                    "name": "\u8d85\u80fd\u529b\u9b54\u7f8e",
                    "value": 2
                },
                {
                    "name": "\u704c\u7bee\u5c11\u5e74",
                    "value": 6
                },
                {
                    "name": "\u884c\u653f\u533a\u5212\u56fe",
                    "value": 2
                },
                {
                    "name": "\u7b80\u7b14\u4eba\u7269",
                    "value": 2
                },
                {
                    "name": "\u7248\u753b",
                    "value": 6
                },
                {
                    "name": "\u80cc\u5305",
                    "value": 2
                },
                {
                    "name": "\u7eb8\u7248\u753b",
                    "value": 2
                },
                {
                    "name": "\u5305",
                    "value": 2
                },
                {
                    "name": "\u5176\u4ed6",
                    "value": 34
                }
            ],
            "radius": [
                "0%",
                "75%"
            ],
            "center": [
                "40%",
                "50%"
            ],
            "label": {
                "show": true,
                "position": "top",
                "margin": 8,
                "formatter": "{b}: {c}"
            },
            "rippleEffect": {
                "show": true,
                "brushType": "stroke",
                "scale": 2.5,
                "period": 4
            },
            "legend_opts": {
                "show": false,
                "padding": 5,
                "itemGap": 10,
                "itemWidth": 25,
                "itemHeight": 14
            }
        }
    ],
    "legend": [
        {
            "data": [
                "\u5361\u901a\u52a8\u6f2b\u4eba\u7269",
                "\u5c4f\u5e55\u622a\u56fe",
                "\u52a8\u7269\u77e2\u91cf\u56fe",
                "\u52a8\u7269\u6f2b\u753b",
                "\u5723\u8bde\u8001\u516c\u516c",
                "\u5361\u901a\u56fe",
                "\u5de5\u7b14\u753b",
                "\u7ed8\u753b",
                "\u56fe\u753b",
                "\u7f8e\u5973",
                "\u7b80\u7b14\u753b",
                "\u8d85\u80fd\u529b\u9b54\u7f8e",
                "\u704c\u7bee\u5c11\u5e74",
                "\u884c\u653f\u533a\u5212\u56fe",
                "\u7b80\u7b14\u4eba\u7269",
                "\u7248\u753b",
                "\u80cc\u5305",
                "\u7eb8\u7248\u753b",
                "\u5305",
                "\u5176\u4ed6"
            ],
            "selected": {},
            "type": "scroll",
            "show": true,
            "left": "100%",
            "orient": "vertical",
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5
    },
    "title": [
        {
            "text": "ai\u8bc6\u522b\uff0c\u56fe\u50cf\u7c7b\u578b\u5360\u6bd4",
            "padding": 5,
            "itemGap": 10
        }
    ]
};
        chart_90b8a018c5734ffe92858f98909ffa27.setOption(option_90b8a018c5734ffe92858f98909ffa27);
    </script>
<br/>    </div>
    <script>
            $('#90b8a018c5734ffe92858f98909ffa27').resizable().draggable().css('border-style', 'dashed').css('border-width', '1px');$("#90b8a018c5734ffe92858f98909ffa27>div:nth-child(1)").width("100%").height("100%");
            new ResizeSensor(jQuery('#90b8a018c5734ffe92858f98909ffa27'), function() { chart_90b8a018c5734ffe92858f98909ffa27.resize()});
            var charts_id = ['90b8a018c5734ffe92858f98909ffa27'];
function downloadCfg () {
    const fileName = 'chart_config.json'
    let downLink = document.createElement('a')
    downLink.download = fileName

    let result = []
    for(let i=0; i<charts_id.length; i++) {
        chart = $('#'+charts_id[i])
        result.push({
            cid: charts_id[i],
            width: chart.css("width"),
            height: chart.css("height"),
            top: chart.offset().top + "px",
            left: chart.offset().left + "px"
        })
    }

    let blob = new Blob([JSON.stringify(result)])
    downLink.href = URL.createObjectURL(blob)
    document.body.appendChild(downLink)
    downLink.click()
    document.body.removeChild(downLink)
}
    </script>
</body>
</html>
